import { Link, useRouterState } from "@tanstack/react-router";
import type * as React from "react";
import { OrgSwitcher } from "@/components/org-switcher";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
	versions: ["Building", "Application"],
	user: {
		name: "shadcn",
		email: "m@example.com",
		avatar: "/avatars/shadcn.jpg",
	},
	navMain: [
		{
			title: "Tasks",
			url: "#",
			items: [
				{
					title: "Dashboard",
					url: "/",
				},
				{
					title: "Reports",
					url: "/reports",
				},
			],
		},
		{
			title: "Settings",
			url: "#",
			items: [
				{
					title: "Organizations",
					url: "/organizations",
				},
			],
		},
	],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	const state = useRouterState();
	return (
		<Sidebar {...props}>
			<SidebarHeader className="border-b h-16">
				<OrgSwitcher orgs={data.versions} defaultorg={data.versions[0]} />
			</SidebarHeader>
			<SidebarContent>
				{/* We create a SidebarGroup for each parent. */}
				{data.navMain.map((item) => (
					<SidebarGroup key={item.title}>
						<SidebarGroupLabel>{item.title}</SidebarGroupLabel>
						<SidebarGroupContent>
							<SidebarMenu>
								{item.items.map((item) => (
									<SidebarMenuItem key={item.title}>
										<SidebarMenuButton
											asChild
											isActive={state.location.pathname === item.url}
										>
											<Link to={item.url}>{item.title}</Link>
										</SidebarMenuButton>
									</SidebarMenuItem>
								))}
							</SidebarMenu>
						</SidebarGroupContent>
					</SidebarGroup>
				))}
			</SidebarContent>
		</Sidebar>
	);
}
